<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Css 实现吸附效果</title>
    <!-- <link rel="stylesheet/less" type="text/css" href="styles.less" /> -->
    <!-- <script src="//cdn.jsdelivr.net/npm/less"></script> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/less.js/3.13.1-alpha.1/less.min.js"></script> -->
    <link rel="stylesheet" href="../less/xifu.css" />
    <!-- <link rel="stylesheet" href="../less/xifu.less"> -->
    <style></style>
  </head>

  <body>
    <!--  css 实现吸附效果 -->
    <div class="ads-position" style="display: none;">
      <ul>
        <li>Top 1</li>
        <li>Top 2</li>
        <li>Normal</li>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
      </ul>
    </div>
    <!-- js 实现吸附效果 -->
    <div class="jsxifubox">
      <div class="searchBox">
        <input type="text" name="" id="" />
      </div>
    </div>
    <div style="height: 200px; background-color: pink;"></div>

    <div style="height: 1000px; background-color: gray;">
      a
      <br />
    </div>

    <script>
      // let scrollbox = document.querySelector('.jsxifubox')
      // scrollbox.addEventListener("scroll", () => {
      //     // let scrollTop = scrollbox.documentElement.scrollTo || scrollbox.scrollTo;
      //     let scrollTop = scrollbox.scrollTop
      //     let offsetTop = document.querySelector(".searchBox").offsetTop
      //     console.log("===scroll===" + scrollTop + "===offsetTop===" + offsetTop)

      //     if (scrollTop > offsetTop) {
      //         document.querySelector(".searchBox").style.position = 'fixed'
      //         document.querySelector('.searchBox').style.top = "20";
      //     } else {
      //         document.querySelector('.searchBox').style.position = "absolute";
      //         document.querySelector('.searchBox').style.top = "50";
      //     }

      // })
      window.addEventListener('scroll', () => {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop
        let offsetTop = document.querySelector('.searchBox').offsetTop
        console.log('===scrollTop===' + scrollTop)
        console.log('===offsetTop===' + offsetTop)

        if (scrollTop >= offsetTop) {
          document.querySelector('.searchBox').style.position = 'fixed'
          document.querySelector('.searchBox').style.top = '0'
        } else {
          document.querySelector('.searchBox').style.position = ''
          document.querySelector('.searchBox').style.top = ''
        }
      })

      const createRouter = () => ({
        routes: [
          {
            path: '/',
            redirect: '/login',
          },
          {
            path: 'login',
            name: 'login',
            component: Login,
          },
          {
            path: '/navigation',
            name: 'navitagtion',
            component: Navigation,
          },
        ],
      })
      const router = createRouter()
      // 清空原来已经注册的路由，那就要设置路由的matcher
      router.matcher = createRouter().matcher
    </script>
  </body>
</html>
